<template>
  <div class="my">
    <section>
      <div>

        <div class="header">
          <router-link to="/login" v-if="!user">
            登陆 / 注册
          </router-link>

          <div class="user-info" v-if="user">
            <img :src="this.baseUrl + user.img_url">
            <h3>{{ user.nickname }}</h3>
          </div>
        </div>

        <ul>
          <li @click="$router.push('/order')" v-if="user">
            订单管理
          </li>
          <li @click="$router.push('/address')" v-if="user">
            地址管理
          </li>
          <li @click="logout" v-if="user">
            退出登录
          </li>
        </ul>

        <div class="payInfo">
          gqvycs3839@sandbox.com
          111111
        </div>

      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import Tabbar from '@/components/common/Tabbar'
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

let user = computed(() => store.state.user)

const logout = () => {
  store.commit('loginOut')
}

</script>

<style lang="less" scoped>
.my {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  section {
    flex: 1;

    .payInfo {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
    }

    .header {
      height: 155px;
      background-color: #b54f4a;
      display: flex;

      a {
        margin: auto;
        color: #fff;
        background-color: rgba(255, 181, 0, 0.9);
        padding: 5px 20px;
        border-radius: 6px;
      }

      .user-info {
        margin: auto;

        img {
          display: block;
          border-radius: 50%;
        }

        h3 {
          color: #fff;
          margin-top: 6px;
          text-align: center;
        }
      }

    }

    ul {
      display: flex;
      flex-direction: column;

      li {
        font-size: 14px;
        color: #222;
        height: 45px;
        display: flex;
        align-items: center;
        margin: 0 20px;
        position: relative;

        &::after {
          content: '';
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          border-bottom: 1px solid #e3e5e9;
          transform: scaleY(.5);
        }
      }


    }

  }


}
</style>